import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Platform,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image,
    TextInput,
    ScrollView,
} from 'react-native';
import moment from 'moment';
import HttpUtils from '../../../utils/HttpUtils';
import HttpUrls from '../../../utils/HttpUrls';
import Constant from '../../../utils/Constant'//全局变量
import Header from "../../../components/header";
import Loading from '../../../utils/Loading';
import PublishCarArrow from '../publishCar/components/PublishCarArrow';
import { ToastToUser } from '../../../utils/CustomToast';
import Picker from 'react-native-picker'
import DatePickerPart from '../../../components/Tool/DatePickerPart'


let navigation

const screenW = Dimensions.get('window').width;

export default class CarReturnStockPage extends Component {

    constructor(props) {
        super(props);
        let carId = this.props.route && this.props.route.params && this.props.route.params.carId ? this.props.route.params.carId : ''
        this.state = {
            carId,
            restoreStatus: '',
            restoreStatusValue: ['再次销售'],
            restoreTime: '',
            restoreRemark: '',//备注
            dateTypeMode: 'YYYY-MM-DD',
            showDatePicker: false,
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {
        Picker.hide();
    }

    componentDidMount() {
        let today = moment().format("YYYY-MM-DD")
        this.setState({
            restoreTime: today,
        })
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>

                <Header navigation={navigation} Title={'车辆回库'} />

                <ScrollView style={{ flex: 1 }}>
                    <View style={styles.containerBox}>
                        <PublishCarArrow
                            name={'回库类型'}
                            necessary={true}
                            content={this.state.restoreStatus ? this.state.restoreStatusValue[0] : ''}
                            clickHandle={() => {
                                this.showStatusPicker()
                            }}
                        />
                        <PublishCarArrow
                            name={'回库日期'}
                            necessary={true}
                            content={this.state.restoreTime}
                            clickHandle={() => {
                                this.setState({ showDatePicker: true })
                            }}
                        />
                        <Text style={styles.remarkText}>回库备注</Text>
                        <View style={styles.descBg}>
                            <TextInput
                                autoCorrect={false}
                                editable={true}
                                multiline={true}
                                autoCapitalize='characters'
                                style={styles.textInput}
                                placeholder={'请输入回库备注'}
                                placeholderTextColor="#999999"
                                value={this.state.restoreRemark}
                                onChangeText={this.changeText.bind(this, 'restoreRemark')}
                            />
                        </View>
                    </View>

                </ScrollView>

                <View style={[styles.bottomBox, { marginBottom: Constant.bottomHeight }]}>
                    <TouchableOpacity
                        style={styles.submitBox}
                        activeOpacity={0.8}
                        onPress={() => {
                            this.submit()
                        }}
                    >
                        <Text style={styles.submitText}>提交</Text>
                    </TouchableOpacity>
                </View>

                <DatePickerPart type={this.state.dateTypeMode} defaultDate={this.state[this.state.restoreTime]} show={this.state.showDatePicker} changeState={
                    (val) => { // 时间选择组件显示与否
                        this.setState({
                            showDatePicker: val,
                        })
                    }
                } changeDate={(date) => {
                    this.setState({
                        restoreTime: date,
                    })
                }} />


                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        );
    }

    showStatusPicker() {
        let data = [
            '再次销售',
            '客户退车',
            '操作失误'
        ];
        let datas = [
            { 'key': '1', 'value': '再次销售' },
            { 'key': '2', 'value': '客户退车' },
            { 'key': '3', 'value': '操作失误' },
        ];
        Picker.init({
            pickerData: data,
            selectedValue: this.state.restoreStatusValue,
            // pickerBg:[255, 0 ,0, 1],
            pickerFontColor: [0, 0, 0, 1],
            pickerCancelBtnText: '取消',
            pickerCancelBtnColor: [134, 136, 137, 1],
            pickerConfirmBtnText: '确认',
            pickerTitleText: '',
            pickerToolBarBg: [255, 255, 255, 1],
            pickerBg: [255, 255, 255, 1],

            onPickerConfirm: data => {
                let value = '';
                for (var i = 0; i < datas.length; i++) {
                    if (datas[i].value == data) {
                        value = datas[i].key
                    }
                }
                this.setState({
                    restoreStatusValue: data,
                    restoreStatus: value
                })
            },
            onPickerCancel: data => {

            },
            onPickerSelect: data => {

            }
        });
        Picker.show();
    }

    //输入框内容输入
    changeText(type, val) {
        this.setState({
            [type]: val
        })
    }

    submit() {
        if (!this.state.restoreStatus) {
            ToastToUser('请选择回库类型')
            return
        }
        if (!this.state.restoreTime) {
            ToastToUser('请选择回库日期')
            return
        }

        let params = {
            carId: this.state.carId,
            merchantId: Constant.userInfo.merchantId,
            restoreStatus: this.state.restoreStatus,
            restoreTime: this.state.restoreTime,
            restoreRemark: this.state.restoreRemark,
            operator: Constant.userInfo.fullname,
        }

        if (this.Loading) {
            this.Loading.show('提交中...');
        }
        HttpUtils.postRequest(HttpUrls.restoreSoldCar, params)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                if (result.code == 0) {
                    ToastToUser('提交成功!')
                    setTimeout(() => {
                        if (this.props.route.params.completion) {
                            this.props.route.params.completion()
                        }
                    }, 500);
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });

    }

}

const styles = StyleSheet.create({
    container: {
        width: screenW,
        flex: 1,
        backgroundColor: '#f9f9f9',
        flexDirection: 'column',
        alignItems: 'center',
    },
    containerBox: {
        marginTop: 10,
        width: screenW,
        flexDirection: 'column',
        paddingHorizontal: 15,
        paddingBottom: 16,
        backgroundColor: '#fff'
    },
    remarkText: {
        marginTop: 12,
        color: '#333333',
        fontSize: 14
    },
    descBg: {
        marginTop: 12,
        width: '100%',
        height: 101,
        paddingHorizontal: 10,
        paddingTop: 4,
        paddingBottom: 17,
        backgroundColor: '#F9F9F9',
        borderRadius: 6
    },
    textInput: {
        color: '#333333',
        fontSize: 14,
        flex: 1,
        textAlignVertical: 'top',
        lineHeight: 18,
    },
    lengthText: {
        position: 'absolute',
        bottom: 5,
        right: 8,
        color: '#999999',
        fontSize: 12
    },
    bottomBox: {
        width: '100%',
        height: 50,
        paddingHorizontal: 15,
        flexDirection: 'row',
        alignItems: 'center'
    },
    submitBox: {
        width: '100%',
        height: 46,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFE000',
        borderRadius: 23
    },
    submitText: {
        color: '#333333',
        fontSize: 16
    }

})